{% extends "base.html" %}

{% block title %}提交评价 - 乒乓球培训管理系统{% endblock %}

{% block page_title %}提交评价{% endblock %}

{% block extra_css %}
<style>
    .evaluation-form {
        max-width: 600px;
        margin: 0 auto;
        background: white;
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .reservation-info {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 30px;
        border-left: 4px solid #ff6b6b;
    }

    .reservation-info h5 {
        color: #ff6b6b;
        margin-bottom: 15px;
    }

    .rating-section {
        margin: 25px 0;
        padding: 20px;
        background: #fff5f5;
        border-radius: 8px;
        border: 1px solid #ffebee;
    }

    .rating-stars {
        text-align: center;
        margin: 20px 0;
    }

    .rating-stars .star-option {
        display: inline-block;
        margin: 0 5px;
        padding: 10px 15px;
        background: #f8f9fa;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        color: #333;
    }

    .rating-stars .star-option:hover {
        background: #fff3cd;
        border-color: #ffc107;
        transform: translateY(-2px);
    }

    .rating-stars .star-option.selected {
        background: #ffc107;
        border-color: #ffc107;
        color: white;
        transform: translateY(-2px);
    }

    .star-display {
        font-size: 1.5rem;
        color: #ffc107;
        display: block;
        margin-bottom: 5px;
    }

    .rating-text {
        font-size: 0.9rem;
        font-weight: 500;
    }

    .comment-section {
        margin: 25px 0;
    }

    .form-floating textarea {
        min-height: 120px;
    }

    .help-text {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 5px;
    }

    .btn-submit {
        background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 100%);
        border: none;
        padding: 12px 30px;
        font-weight: 500;
        border-radius: 8px;
        color: white;
        transition: all 0.3s ease;
    }

    .btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(255,107,107,0.3);
        color: white;
    }

    .evaluation-tips {
        background: #e3f2fd;
        border-left: 4px solid #2196f3;
        padding: 15px;
        margin-bottom: 25px;
        border-radius: 0 8px 8px 0;
    }

    .evaluation-tips h6 {
        color: #1976d2;
        margin-bottom: 10px;
    }

    .evaluation-tips ul {
        margin-bottom: 0;
        padding-left: 20px;
        font-size: 0.9rem;
        color: #424242;
    }

    .back-link {
        margin-bottom: 20px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="back-link">
        <a href="{{ url_for('evaluations.index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-arrow-left"></i> 返回评价列表
        </a>
    </div>

    <div class="evaluation-form">
        <!-- 课程信息 -->
        <div class="reservation-info">
            <h5>
                <i class="fas fa-info-circle"></i> 课程信息
            </h5>
            <div class="row">
                <div class="col-md-6">
                    <strong>
                        {% if user_type == 'student' %}
                            教练：{{ reservation.coach.real_name or reservation.coach.username }}
                        {% else %}
                            学员：{{ reservation.student.real_name or reservation.student.username }}
                        {% endif %}
                    </strong>
                </div>
                <div class="col-md-6">
                    <strong>球台：{{ reservation.table.name }}</strong>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-md-6">
                    <i class="fas fa-calendar"></i> {{ reservation.reservation_date.strftime('%Y年%m月%d日') }}
                </div>
                <div class="col-md-6">
                    <i class="fas fa-clock"></i> {{ reservation.start_time.strftime('%H:%M') }} - {{ reservation.end_time.strftime('%H:%M') }}
                </div>
            </div>
        </div>

        <!-- 评价提示 -->
        <div class="evaluation-tips">
            <h6><i class="fas fa-lightbulb"></i> 评价建议</h6>
            <ul>
                <li>请根据实际体验客观评价</li>
                <li>评价内容将帮助改善服务质量</li>
                <li>提交后24小时内可修改评价</li>
                {% if user_type == 'student' %}
                    <li>可以评价教练的专业水平、教学方法等</li>
                {% else %}
                    <li>可以评价学员的学习态度、配合度等</li>
                {% endif %}
            </ul>
        </div>

        <!-- 评价表单 -->
        <form method="POST" novalidate>
            {{ form.hidden_tag() }}
            {{ form.reservation_id() }}
            {{ form.evaluator_type() }}

            <!-- 评分选择 -->
            <div class="rating-section">
                <label class="form-label">
                    <strong>
                        {% if user_type == 'student' %}
                            <i class="fas fa-chalkboard-teacher"></i> 对教练的评分
                        {% else %}
                            <i class="fas fa-user-graduate"></i> 对学员的评分
                        {% endif %}
                    </strong>
                </label>

                <div class="rating-stars" id="rating-stars">
                    {% for value, label in form.rating.choices %}
                        {% if value %}
                            <div class="star-option" data-value="{{ value }}">
                                <span class="star-display">
                                    {% for i in range(value|int) %}★{% endfor %}
                                    {% for i in range(5 - value|int) %}☆{% endfor %}
                                </span>
                                <span class="rating-text">{{ label.split(' ', 1)[1] if ' ' in label else label }}</span>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>

                {{ form.rating(style="display: none;") }}

                {% if form.rating.errors %}
                    <div class="text-danger small">
                        {% for error in form.rating.errors %}
                            {{ error }}<br>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <!-- 评价内容 -->
            <div class="comment-section">
                <div class="form-floating">
                    {{ form.comment(class="form-control", placeholder="请详细描述您的体验和建议...") }}
                    {{ form.comment.label(class="form-label") }}
                </div>
                <div class="help-text">
                    {% if user_type == 'student' %}
                        可以评价教练的教学质量、专业水平、服务态度等方面
                    {% else %}
                        可以评价学员的学习态度、配合程度、接受能力等方面
                    {% endif %}
                </div>
                {% if form.comment.errors %}
                    <div class="text-danger small mt-2">
                        {% for error in form.comment.errors %}
                            {{ error }}<br>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <!-- 提交按钮 -->
            <div class="text-center mt-4">
                {{ form.submit(class="btn btn-submit btn-lg me-3") }}
                <a href="{{ url_for('evaluations.index') }}" class="btn btn-outline-secondary">取消</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 评分选择交互
    $('.star-option').click(function() {
        var rating = $(this).data('value');

        // 更新隐藏的表单字段
        $('#rating').val(rating);

        // 更新视觉效果
        $('.star-option').removeClass('selected');
        $(this).addClass('selected');

        // 验证反馈
        $('#rating').removeClass('is-invalid');
        $('.rating-section .text-danger').hide();
    });

    // 表单验证
    $('form').on('submit', function(e) {
        var isValid = true;

        // 验证评分
        if (!$('#rating').val()) {
            isValid = false;
            $('.rating-section').append('<div class="text-danger small mt-2">请选择评分</div>');
        }

        if (!isValid) {
            e.preventDefault();
            $('html, body').animate({
                scrollTop: $('.text-danger:first').offset().top - 100
            }, 500);
        }
    });

    // 字符计数
    $('#comment').on('input', function() {
        var length = $(this).val().length;
        var maxLength = 500;

        if (!$('.char-count').length) {
            $(this).after('<div class="char-count text-muted small mt-1"></div>');
        }

        $('.char-count').text(length + '/' + maxLength + ' 字符');

        if (length > maxLength) {
            $('.char-count').addClass('text-danger').removeClass('text-muted');
        } else {
            $('.char-count').addClass('text-muted').removeClass('text-danger');
        }
    });

    // 自动保存草稿（可选功能）
    var draftKey = 'evaluation_draft_{{ reservation.id }}';

    // 加载草稿
    var draft = localStorage.getItem(draftKey);
    if (draft) {
        var draftData = JSON.parse(draft);
        if (draftData.comment && !$('#comment').val()) {
            $('#comment').val(draftData.comment);
        }
        if (draftData.rating && !$('#rating').val()) {
            $('#rating').val(draftData.rating);
            $('.star-option[data-value="' + draftData.rating + '"]').addClass('selected');
        }
    }

    // 保存草稿
    $('#comment, #rating').on('change input', function() {
        var draftData = {
            rating: $('#rating').val(),
            comment: $('#comment').val(),
            timestamp: new Date().getTime()
        };
        localStorage.setItem(draftKey, JSON.stringify(draftData));
    });

    // 提交成功后清除草稿
    $('form').on('submit', function() {
        if ($('#rating').val()) {
            localStorage.removeItem(draftKey);
        }
    });
});
</script>
{% endblock %}